<template>
  <view class="content">
    <view class="list">
      <view class="list-call input-container" :class="{ 'input-focused': inputFocus === 'phone' }">
        <image class="img" src="/static/login/1.png"></image>
        <input 
          class="sl-input" 
          type="number" 
          v-model="phone" 
          maxlength="11" 
          placeholder="请输入手机号" 
          @focus="inputFocus = 'phone'"
          @blur="inputFocus = ''"
        />
      </view>
      <view class="list-call input-container" :class="{ 'input-focused': inputFocus === 'password' }">
        <image class="img" src="/static/login/2.png"></image>
        <input 
          class="sl-input" 
          type="text" 
          v-model="password" 
          maxlength="32" 
          placeholder="请输入新密码" 
          :password="!showPassword" 
          @focus="inputFocus = 'password'"
          @blur="inputFocus = ''"
        />
        <image class="img" :src="showPassword?'/static/login/op.png':'/static/login/cl.png'" @tap="togglePasswordVisibility"></image>
      </view>
      <view class="list-call input-container" :class="{ 'input-focused': inputFocus === 'code' }">
        <image class="img" src="/static/login/3.png"></image>
        <input 
          class="sl-input" 
          type="number" 
          v-model="code" 
          maxlength="4" 
          placeholder="验证码" 
          @focus="inputFocus = 'code'"
          @blur="inputFocus = ''"
        />
        <view class="yzm" :class="{ yzms: second>0 }" @tap="getVerificationCode">{{verificationCodeText}}</view>
      </view>
    </view>
    <view class="button-login" hover-class="button-hover" @tap="resetPassword">
      <text>修改密码</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onUnmounted, computed } from 'vue'

// 表单数据
const phone = ref('')
const password = ref('')
const code = ref('')
const showPassword = ref(false)
const second = ref(0)
const inputFocus = ref('') // 记录当前聚焦的输入框

// 计算属性：验证码按钮文本
const verificationCodeText = computed(() => {
  if (second.value === 0) {
    return '获取验证码'
  } else {
    return second.value < 10 
      ? `重新获取0${second.value}` 
      : `重新获取${second.value}`
  }
})

// 定时器引用
let timer = null

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 清除定时器
const clearTimer = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  second.value = 0
}

// 获取验证码
const getVerificationCode = () => {
  // 验证手机号
  if (phone.value.length !== 11) {
    uni.showToast({
      icon: 'none',
      title: '手机号不正确'
    })
    return
  }

  // 防止重复点击
  if (second.value > 0) {
    return
  }

  // 开始倒计时
  second.value = 60
  timer = setInterval(() => {
    second.value--
    if (second.value === 0) {
      clearTimer()
    }
  }, 1000)

}

// 重置密码
const resetPassword = () => {
  // 表单验证
  if (phone.value.length !== 11) {
    uni.showToast({
      icon: 'none',
      title: '手机号不正确'
    })
    return
  }

  if (password.value.length < 6) {
    uni.showToast({
      icon: 'none',
      title: '密码长度不能少于6位'
    })
    return
  }

  if (code.value.length !== 4) {
    uni.showToast({
      icon: 'none',
      title: '验证码不正确'
    })
    return
  }

}

// 组件卸载时清除定时器
onUnmounted(() => {
  clearTimer()
})
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
  padding-top: 50rpx;
  padding-left: 70rpx;
  padding-right: 70rpx;
}

.list-call {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  color: #333333;
  border-bottom: 0.5px solid #e2e2e2;
}

.list-call .img {
  width: 40rpx;
  height: 40rpx;
}

.list-call .sl-input {
  flex: 1;
  text-align: left;
  font-size: 32rpx;
  margin-left: 16rpx;
}

.button-login {
  color: #FFFFFF;
  font-size: 34rpx;
  width: 470rpx;
  height: 100rpx;
  background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
  box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
  border-radius: 50rpx;
  line-height: 100rpx;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100rpx;
}

.button-hover {
  background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
}

.yzm {
  color: #FF7D13;
  font-size: 24rpx;
  line-height: 64rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  width: auto;
  height: 64rpx;
  border: 1rpx solid rgba(255, 131, 30, 1);
  border-radius: 50rpx;
}

.yzms {
  color: #999999 !important;
  border: 1rpx solid #999999;
}

/* 新增的输入框样式 */
.input-container {
  transition: all 0.3s ease;
}

.input-focused {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  border-radius: 8rpx;
}
</style>